<!-- 搜索界面的歌手list -->
<template>
  <div class="singerList">
    <ul>
      <li v-for="song in list"
          :key="song.id">
        <img v-lazy="song.coverImgUrl"
             class="img-60">
        <span>{{ song.name }}</span>
        <span class="color"
              style="margin-left: 18%;">{{ song.trackCount }}首</span>
        <span class="color"
              style="width:auto;">by</span>
        <span class="color"
              style="color:black">&nbsp;{{song.creator.nickname}}</span>
        <div class="num color">
          <svg class="icon"
               aria-hidden="true">
            <use xlink:href="#icon-bofang2"></use>
          </svg>
          <span style="margin-left:5px;">{{ changeNum(song.playCount) }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  methods: {
    changeNum (num) {
      if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + '亿'
      } else if (num > 10000) {
        return (num / 10000).toFixed(1) + '万'
      } else {
        return num
      }
    },
  }
}
</script>

<style scoped lang="less">
ul {
  display: flex;
  flex-wrap: wrap;
  li {
    display: flex;
    align-items: center;
    width: 100%;
    height: 80px;
    margin-bottom: 10px;
    &:hover {
      background-color: rgb(244, 243, 243);
      cursor: pointer;
    }
  }
  .img-60 {
    margin: 10px;
    width: 60px;
    height: 60px;
    margin-left: 30px;
    vertical-align: bottom;
    border: 1px solid #f4efef;
    border-radius: 4px;
  }
  span {
    width: 300px;
    flex-shrink: 0;
    height: 22px;
    line-height: 22px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .color {
    color: #919192;
    font-size: 13px;
    width: 140px;
  }
  .num {
    width: 100px;
    height: 30px;
    line-height: 30px;
    margin-left: 20%;
    .icon {
      vertical-align: middle;
    }
  }
}
</style>